<template>
	<view>
		<view>
			<view class="q-type">类型</view>
			<view class="q-type-item">
				<view class="type-item" :class="{sele: item.id===typeVal}" v-for="item in qTypes" :key="item.id"
					@click="sel(item)">
					{{item.title}}
				</view>
			</view>
		</view>

		<view @click="add">add</view>
		<template v-for="(item,index) in qList">
			<view @mouseenter="item.showTip=true" @mouseleave="item.showTip=false">
				<view class="q-itme" :class="{'q-select': item.edit}" :key="index">
					<view class="title" v-if="!item.edit">{{item.id}}==> {{item.title}}</view>
					<view class="title" v-if="item.edit">
						{{item.id}}==><input type="text" v-model="item.title"/>
					</view>
					<!-- 单选或多选 答案 -->
					<template v-if="[1,3].includes(item.type)">
						<view v-if="!item.edit">
							<view class="anss" v-for="(ele,index2) in item.answer" :key="index2">
								{{ele.title}}
								<checkbox v-model:checked="ele.checked"></checkbox>
							</view>
						</view>
						<view v-if="item.edit">
							<view class="anss" v-for="(ele,index2) in item.answer" :key="index2">
								<input type="text" v-model="ele.title"/>
							</view>
						</view>
					</template>

					<!-- 填空 答案 -->
					<template v-if="2===item.type">
						<view v-if="!item.edit">{{item.ansVal}}</view>
						<view v-if="item.edit">
							<input type="text" v-model="item.ansVal"/>
						</view>
					</template>

					<!-- 判断 -->
					<template v-if="4===item.type">
						  <!-- <input type="radio" id="apple" name="fruit" value="R">
						  <label for="apple">正确</label><br>
						  <input type="radio" id="orange" name="fruit" value="W">
						  <label for="orange">错误</label><br> -->
						  <radio-group>
							  <label class="radio"><radio value="R" :checked="item.ansVal==='R'" />正确</label>
							  <label class="radio"><radio value="W" :checked="item.ansVal==='W'"/>错误</label>
							</radio-group>
					</template>

				</view>
				<view v-show="item.showTip" class="tooltip">
					<view @click.stop="addAfter(index)">add</view>
					<view v-if="!item.edit" @click.stop="edit(item)">edit</view>
					<view @click.stop="del(index)">del</view>
					<view @click.stop="up(item)">up</view>
					<view @click.stop="down(item)">down</view>
					<view @click.stop="first(item)">first</view>
					<view @click.stop="last(item)">last</view>
					<view v-if="item.edit" @click.stop="saveEdit(item)">saveEdit</view>
				</view>
			</view>
		</template>

	</view>
</template>

<script>
	import data from './data.js'
	console.log("data", data);
	export default {
		name: "question-comp",
		data() {
			return {
				ansArr: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"],
				qList: data.quest,
				qTypes: data.types,
				typeVal: '1',
			};
		},
		onLoad(options) {

		},
		methods: {
			sel(item) {
				console.log(item)
				this.typeVal = item.id
			},


			//操作(题目级别)////////////////////////////
			add() {
				console.log("新增===>", this.typeVal);
				this.qList.push(this.getNewEle());
			},
			addAfter(index) {
				data.ArrUtils.addElementAfter(this.qList, index, this.getNewEle())
			},
			getNewEle() {
				return {
					id: parseInt(Math.random() * 1000000),
					type: this.typeVal,
					edit: true,
					title: "",
					ansVal: '',
					showTip: false,
					answer: [1, 3].includes(this.typeVal) ? [] : ''
				}
			},
			edit(item) {
				console.log("item===>", item);
				item.edit = true
			},
			saveEdit(item) {
				item.edit = false
			},
			del(index) {
				data.ArrUtils.removeElementAtIndex(this.qList, index)
			},


			//移动////////////////////////////
			up(item) {
				console.log("up==>", item);
				this.qList = data.ArrUtils.moveElementForward(this.qList, item)
			},
			down(item) {
				console.log("down==>", item);
				this.qList = data.ArrUtils.moveElementBackward(this.qList, item)
			},
			first(item) {
				console.log("first==>", item);
				this.qList = data.ArrUtils.moveToFirst(this.qList, item)
			},
			last(item) {
				console.log("last==>", item);
				this.qList = data.ArrUtils.moveToLast(this.qList, item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.q-type {
		border-bottom: 1px solid green;
		padding: 15px;
	}

	.q-type-item {
		display: flex;

		.type-item {
			padding: 15px;
			border: 1px solid #f2f2f2;
		}

		.sele {
			border-bottom: 1px solid green;
		}
	}


	.q-itme {
		border: 1px solid #f2f2f2;
		padding: 15px;
		margin-bottom: 10px;
	}
	
	.q-select{
		border: 1px solid red;
	}

	.tooltip {
		display: flex;
		justify-content: space-evenly
	}
</style>